import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_drive/components/todo/todo.dart';
import 'package:test_drive/components/todo/todo_list.dart';

class DetailPage extends StatefulWidget {
  // 是否是新增的todo
  final bool _isCreate;
  // 查看详情页时对应todo的id
  final String? _currentId;

  const DetailPage(this._isCreate, {String? currentId, Key? key})
      : _currentId = currentId,
        super(key: key);

  @override
  _DetailPageState createState() {
    return _DetailPageState();
  }
}

/// 状态组件对应的状态
class _DetailPageState extends State<DetailPage> {
  // 对比React Form的ref
  final _formKey = GlobalKey<FormState>();
  // 是否新增todo
  bool _isCreate = false;
  // todo任务
  String? _task;
  // 当前todo id
  String? _currentId;

  /// 初始化生命周期
  @override
  void initState() {
    super.initState();
    // widget是上面StatefulWidget的实例
    _isCreate = widget._isCreate;
    _currentId = widget._currentId;
  }

  @override
  Widget build(BuildContext context) {
    TodoList todoList = Provider.of(context);

    // 页面骨架
    return Scaffold(
      appBar: AppBar(
        title: _isCreate
            ? const Text('新增Todo')
            : Text('Todo详情页[ID: ${_currentId ?? '-'}]'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () => Navigator.of(context).pushNamed('/'),
        ),
      ),
      // 新增页或详情页
      body: _isCreate
          ? Form(
              key: _formKey,
              child: Column(
                children: [
                  TextFormField(
                    decoration: const InputDecoration(
                      labelText: '任务',
                      prefixIcon: Icon(Icons.article),
                    ),
                    validator: (value) {
                      return (value == null || value.isEmpty) ? '必须填写' : null;
                    },
                    onSaved: (newValue) {
                      _task = newValue;
                    },
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 16.0),
                    child: ElevatedButton(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          _formKey.currentState?.save();

                          todoList.add(Todo(
                              task: _task ?? 'Task',
                              time: DateTime.now(),
                              complete: false));

                          Navigator.of(context).pushNamed('/');
                        }
                      },
                      child: const Text('提交'),
                    ),
                  ),
                ],
              ),
            )
          : Column(
              children: [
                Card(
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    width: MediaQuery.of(context).size.width,
                    child: Row(
                      children: [
                        const Text(
                          '任务：',
                          style: TextStyle(fontSize: 16),
                        ),
                        Expanded(
                          child: Text(
                            todoList.getById(_currentId)?.task ?? 'Unknown',
                            style: const TextStyle(fontSize: 16),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Card(
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    width: MediaQuery.of(context).size.width,
                    child: Row(
                      children: [
                        const Text(
                          '任务状态：',
                          style: TextStyle(fontSize: 16),
                        ),
                        Text(
                          todoList.getById(_currentId)!.complete
                              ? '已完成'
                              : '未完成',
                          style: const TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                  ),
                ),
                Card(
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    child: Row(
                      children: [
                        const Text(
                          '任务创建时间：',
                          style: TextStyle(fontSize: 16),
                          textAlign: TextAlign.left,
                        ),
                        Text(
                          todoList.getById(_currentId)?.time.toString() ??
                              'Unknown',
                          style: const TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
    );
  }
}
